<div class="content-container" style="height: 100%;">
    <nav class="sidenav">
        <section class="sidenav-content">
            <section class="nav-group">
                <ul class="nav-list">
                    <li>
                        <a class="nav-link" [ngClass]="{'active':resourceType == 'HOST'}" (click)="changeTab('HOST')">
                            <div class="nav-slide-item">
                                {{'APP_HOST'|translate}}
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" [ngClass]="{'active':resourceType == 'PLAN'}" (click)="changeTab('PLAN')">
                            <div class="nav-slide-item">
                                {{"APP_PLAN" |translate}}
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" [ngClass]="{'active':resourceType == 'BACKUP_ACCOUNT'}"
                           (click)="changeTab('BACKUP_ACCOUNT')">
                            <div class="nav-slide-item">
                                {{"APP_BACKUP_ACCOUNT" |translate}}
                            </div>
                        </a>
                    </li>
                </ul>
            </section>
        </section>
    </nav>
    <div class="content-area">
        <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" *ngIf="resourceType==='HOST'">
            <clr-dg-action-bar>
                <div class="btn-group" *ngIf="user.isAdmin||currentMember.role === 'PROJECT_MANAGER'">
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onCreateBy()">
                        <clr-icon shape="plus" size="16"></clr-icon>
                        {{"APP_ADD"|translate}}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()"
                            [disabled]="selected.length<1">
                        <clr-icon shape="close"></clr-icon>
                        {{"APP_DELETE"|translate}}
                    </button>
                </div>
            </clr-dg-action-bar>
            <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CLUSTER'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_IP'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CPU'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_HOST_MEMORY'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_GPU'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_OS'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_STATUS'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>
            <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
                <clr-dg-cell>{{item['name']}}</clr-dg-cell>
                <clr-dg-cell>{{item['clusterName']}}</clr-dg-cell>
                <clr-dg-cell>{{item['ip']}}</clr-dg-cell>
                <clr-dg-cell>{{item['cpuCore']}}</clr-dg-cell>
                <clr-dg-cell>{{item['memory']}}</clr-dg-cell>
                <clr-dg-cell>{{item['gpuNum']}}</clr-dg-cell>
                <clr-dg-cell>{{item['os']}} {{item['osVersion']}}</clr-dg-cell>
                <clr-dg-cell>{{item['status']}}</clr-dg-cell>
                <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size"
                                   [clrDgTotalItems]="total"
                                   (clrDgPageChange)="pageBy()">
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_HOST"|translate}}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
        <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" *ngIf="resourceType==='PLAN'">
            <clr-dg-action-bar>
                <div class="btn-group" *ngIf="user.isAdmin||currentMember.role === 'PROJECT_MANAGER'">
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onCreateBy()">
                        <clr-icon shape="plus" size="16"></clr-icon>
                        {{"APP_ADD"|translate}}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()"
                            [disabled]="selected.length<1">
                        <clr-icon shape="close"></clr-icon>
                        {{"APP_DELETE"|translate}}
                    </button>
                </div>
            </clr-dg-action-bar>
            <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_PLAN_DEPLOY_TEMPLATE'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>

            <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
                <clr-dg-cell>{{item.name}}</clr-dg-cell>
                <clr-dg-cell>{{getDeployName(item['deployTemplate'])}}</clr-dg-cell>
                <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                                   (clrDgPageChange)="pageBy()">
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_PLAN"|translate}}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
        <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" *ngIf="resourceType==='BACKUP_ACCOUNT'">
            <clr-dg-action-bar>
                <div class="btn-group" *ngIf="user.isAdmin||currentMember.role === 'PROJECT_MANAGER'">
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onCreateBy()">
                        <clr-icon shape="plus" size="16"></clr-icon>
                        {{"APP_ADD"|translate}}
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()"
                            [disabled]="selected.length<1">
                        <clr-icon shape="close"></clr-icon>
                        {{"APP_DELETE"|translate}}
                    </button>
                </div>
            </clr-dg-action-bar>
            <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_BUCKET'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_TYPE'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_STATUS'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>

            <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
                <clr-dg-cell>{{item.name}}</clr-dg-cell>
                <clr-dg-cell>{{item['bucket']}}</clr-dg-cell>
                <clr-dg-cell>{{item['type']}}</clr-dg-cell>
                <clr-dg-cell>{{item['status']}}</clr-dg-cell>
                <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                                   (clrDgPageChange)="pageBy()">
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_CREDENTIAL"|translate}}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>

    </div>
</div>

